<template>
    <div class="app-container">
        <el-tabs v-model="tabModel">
            <el-tab-pane label="列表模式" name="list">
                <el-card class="filter-container" shadow="never">
                    <span>时间范围：</span>
                    <el-date-picker
                        v-model="listQuery.times"
                        type="daterange"
                        :picker-options="pickerOptions"
                        @change="onDateChange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                    >
                    </el-date-picker>
                </el-card>
                <el-card class="tag-container" shadow="never">
                    <el-row type="flex" justify="space-around">
                        <el-card shadow="never" class="bref-block">
                            <div class="inner-block left-block">
                                <p>订单数</p>
                                <p v-if="typeof bref.saleCount === 'number'">
                                    {{ bref.saleCount }}
                                </p>
                            </div>
                            <div class="inner-block right-block">
                                <i class="el-icon-s-order"></i>
                            </div>
                        </el-card>
                        <el-card shadow="never" class="bref-block">
                            <div class="inner-block left-block">
                                <p>退货数</p>
                                <p v-if="typeof bref.refundCount === 'number'">
                                    {{ bref.refundCount }}
                                </p>
                            </div>
                            <div class="inner-block right-block">
                                <i class="el-icon-s-order"></i>
                            </div>
                        </el-card>
                        <el-card shadow="never" class="bref-block">
                            <div class="inner-block left-block">
                                <p>订单金额</p>
                                <p v-if="typeof bref.saleAmount === 'number'">
                                    {{ bref.saleAmount }}
                                </p>
                            </div>
                            <div class="inner-block right-block">
                                <i class="el-icon-s-order"></i>
                            </div>
                        </el-card>
                        <el-card shadow="never" class="bref-block">
                            <div class="inner-block left-block">
                                <p>退货金额</p>
                                <p v-if="typeof bref.refundAmount === 'number'">
                                    {{ bref.refundAmount }}
                                </p>
                            </div>
                            <div class="inner-block right-block">
                                <i class="el-icon-s-order"></i>
                            </div>
                        </el-card>
                        <el-card shadow="never" class="bref-block">
                            <div class="inner-block left-block">
                                <p>退货全额</p>
                                <p v-if="typeof bref.totalAmount === 'number'">
                                    {{ bref.totalAmount }}
                                </p>
                            </div>
                            <div class="inner-block right-block">
                                <i class="el-icon-s-order"></i>
                            </div>
                        </el-card>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="tableRef"
                        :data="dataList"
                        style="width: 100%"
                        v-loading="listLoading2"
                        border
                    >
                        <el-table-column label="下单日期" align="center">
                            <template slot-scope="scope">{{ scope.row.summaryDate }}</template>
                        </el-table-column>
                        <el-table-column label="订单数" align="center">
                            <template slot-scope="scope">{{ scope.row.saleCount }}</template>
                        </el-table-column>
                        <el-table-column label="订单金额" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.saleAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="退货笔数" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.refundCount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="退货金额" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.refundAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="小记" align="center">
                            <template slot-scope="scope">{{ scope.row.totalAmount }}</template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery.pageNum"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane lazy label="图表模式" name="chart">
                <el-card shadow="never">
                    <!-- <span v-if="dataList.length === 0"> No data</span> -->
                    <div>
                        <ve-line
                            :settings="chartSettings"
                            :legend-visible="false"
                            :data="chartData"
                            :loading="listLoading2"
                            :data-empty="dataEmpty"
                        ></ve-line>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getTotalOrderData, getDetailOrderData } from '@/api/datas';
import { pickerOptions } from '@/utils/index';
let yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    times: [yesterday, yesterday]
};

export default {
    data() {
        return {
            tabModel: 'list',
            pickerOptions,
            listLoading1: false,
            listLoading2: false,
            dataList: [],
            listQuery: Object.assign({}, defaultListQuery),
            total: null,
            bref: {
                saleCount: '',
                saleAmount: '',
                refundCount: '',
                refundAmount: '',
                totalAmount: ''
            },
            chartSettings: {
                yAxisName: ['订单金额', '订单笔数'],
                axisSite: { right: ['saleCount'] },
                labelMap: { saleCount: '订单笔数', saleAmount: '订单金额', summaryDate: '订单日期' }
            },
            chartData: {
                columns: ['summaryDate', 'saleCount', 'saleAmount'],
                rows: []
            },
            dataEmpty: true
        };
    },
    created() {
        this.getTotal();
        this.getList();
    },
    methods: {
        getTotal() {
            this.listLoading1 = true;
            getTotalOrderData(this.listQuery).then(res => {
                this.listLoading1 = false;
                if (res.data.success) {
                    this.bref = res.data.data;
                } else {
                }
            });
        },
        getList() {
            this.listLoading2 = true;
            getDetailOrderData(this.listQuery).then(res => {
                this.listLoading2 = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.dataList = res.data.data;
                    this.chartData.rows = res.data.data.map(row => {
                        return {
                            ...row
                            // summaryDate: new Date(row.summaryDate)
                        };
                    });
                    this.dataEmpty = false;
                    this.total = res.data.extra.total;
                } else {
                    this.dataList = [];
                    this.chartData.columns = [];
                    this.chartData.rows = [];
                    this.dataEmpty = true;
                    this.total = 0;
                }
            });
        },
        onDateChange(dates) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = 5;
            this.getList();
            this.getTotal();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .bref-block {
    .el-card__body {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .inner-block {
        display: inline-flex;
        text-align: center;
        &.left-block {
            width: 60%;
            flex-direction: column;
            justify-content: center;
            p:nth-child(2) {
                color: red;
            }
        }

        &.right-block {
            width: 30%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: red;
            font-size: 30px;
            line-height: 100%;
        }
    }
}
</style>
